<template>
  <div class="banner">
    <p style="font-size: 3em"> {{ blog.blogTitle }}</p>
    <span><el-icon><Calendar/></el-icon>发表时间：{{ blog.releaseTime }}</span>
    <el-divider direction="vertical"></el-divider>
    <span><el-icon><RefreshLeft/></el-icon>更新时间：{{ blog.updateTime }}</span>
    <br>
    <el-icon>
      <Postcard/>
    </el-icon>
    <el-link style="color: white"
             @click="toCategory(blog.blogCategoryId)">
      分类:{{ blog.blogCategoryName }}
    </el-link>
    <el-divider direction="vertical"></el-divider>
    <span><el-icon><View/></el-icon>阅读量:{{ blog.blogViews }}</span>
    <el-divider direction="vertical"></el-divider>
    <span><el-icon><Coin/></el-icon>字数统计:{{ textLength }}</span>
    <el-divider direction="vertical"></el-divider>
    <span><el-icon><ChatLineSquare/></el-icon>评论数:0</span><br>
    <span>
      <el-icon><Discount/></el-icon>
      标签:
      <span v-for="tag in blog.tags">{{ tag.tagName }} ,</span>
    </span>
  </div>
  <br>
  <el-row :gutter="20">
    <el-col :span="2"></el-col>
    <el-col :span="15">
      <el-card>
        <template #header>
          <el-button @click="back">
            <el-icon>
              <Back/>
            </el-icon>
            返回
          </el-button>
          <el-button @click="changeStar">
            <icon-star v-show="!isStar" theme="two-tone" size="18" :fill="['#7a7a7a' ,'#ffffff']"/>
            <icon-star v-show="isStar" theme="filled" size="20" fill="#ffe800" :strokeWidth="3"/>
            收藏
          </el-button>
        </template>
        <v-md-preview :text="blog.blogContent"></v-md-preview>

        <el-divider style="margin: 50px 0">end</el-divider>
        <div class="buttons">
          <el-popover
              placement="top-start"
              title="点赞"
              :width="200"
              trigger="hover"
              content="点赞功能开发中 !"
          >
            <template #reference>
              <el-button>
                <icon-thumbs-up theme="filled" size="16" fill="#409EFF"/> &nbsp;点赞
              </el-button>
            </template>
          </el-popover>
          <!--          <el-button disabled>-->
          <!--            <icon-thumbs-up theme="filled" size="16" fill="#409EFF"/> &nbsp;点赞-->
          <!--          </el-button>-->
          <el-popover
              placement="top-start"
              :width="590"
              trigger="hover"
          >
            <template #reference>
              <el-button>
                <icon-finance theme="filled" size="16" fill="#409eff"/> &nbsp;打赏
              </el-button>
            </template>
            <el-image src="/weixinpay.jpg" style="height: 300px;border-radius: 10%;padding: 10px;"></el-image>
            <el-image src="/alipay.jpg" style="display: inline-block;height: 300px;border-radius: 10%;padding: 10px;"></el-image>
          </el-popover>
          <!--          <el-button>-->
          <!--            <icon-finance theme="filled" size="16" fill="#409eff"/> &nbsp;打赏-->
          <!--          </el-button>-->
        </div>

        <!-- 上下一篇 -->
        <div class="around">
          <div class="left">
            <a v-if="previous" :href="'/article/'+previous.blogId">
              <el-icon style="vertical-align: text-bottom">
                <DArrowLeft/>
              </el-icon>
              上一篇
              <span>{{ previous.blogTitle }}</span>
            </a>
            <p v-else>
              上一篇 没有了...
            </p>
          </div>
          <div class="right">
            <a v-if="next" :href="'/article/'+next.blogId">
              下一篇
              <span>{{ next.blogTitle }}</span>
              <el-icon style="vertical-align: text-bottom">
                <DArrowRight/>
              </el-icon>
            </a>
            <p v-else>下一篇 没有了...</p>
          </div>
        </div>

      </el-card>
    </el-col>
    <el-col :span="5">
      <el-card>
        <template #header>
          <span>同类文章</span>
        </template>
        <div v-for="blog in similarBlogs">
          <div style="display: flex">
            <a :href="'/article/'+blog.blogId"><img :src="blog.blogImg" style="width: 100px"></a>
            <div style="flex: 1">
              <a :href="'/article/'+blog.blogId" style="margin: 5px">{{ blog.blogTitle }}</a><br>
              <span class="release_time">{{ blog.releaseTime }}</span>
            </div>
          </div>
          <hr style="margin: 4px;height: 1px;border: none;background-color: #d3cbcb">
        </div>
      </el-card>
    </el-col>
    <el-col :span="2"></el-col>
  </el-row>
</template>

<script>

import userStore from "@/store/UserStore"
import pinia from "@/store/pinia";
import {ElMessage} from "element-plus";

const store = userStore(pinia)

export default {
  name: "Article",
  props: ['blogId'],
  computed: {
    textLength() {
      // 先判断blog 对象有没有创建好，没创建好，字数统计为0
      let arr = Object.keys(this.blog);
      if (arr.length === 0) {
        return 0
      } else {
        return this.blog.blogContent.length
      }
    }
  },
  created() {
    this.init()
    this.addView()
    this.getStarFlg()
  },
  data() {
    return {
      blog: {},
      similarBlogs: [],
      isStar: false,
      // 上一篇，下一篇
      next: {},
      previous: {}
    }
  },
  methods: {
    async init() {
      let {data: result} = await this.$http.get("/api/blog/getBlogById", {params: {id: this.blogId}})
      this.blog = result.dataMap.blog
      let {data: result2} = await this.$http.get("/api/blog/getBlogByCategoryId", {params: {categoryId: this.blog.blogCategoryId}})
      this.similarBlogs = result2.dataMap.blogs
      // 上一篇和下一篇
      let {data: result3} = await this.$http.get("/api/blog/getPreviousAndNext", {params: {blogId: this.blog.blogId}})
      this.previous = result3.dataMap.previous
      this.next = result3.dataMap.next

    },
    async addView() {
      let {data: result} = await this.$http.get("/api/blog/addBlogViews", {params: {blogId: this.blogId}})
    },
    toCategory(categoryId) {
      this.$router.push({path: "/categories/" + categoryId})
    },
    back() {
      this.$router.go(-1)
    },
    async getStarFlg() {
      if (!store.hasUserInfo) {
        return false
        // ElMessage.error({showClose: true, message: "请先登录后在使用收藏功能！", duration: 1000})
      }
      let {data: result} = await this.$http.get("/api/star/isStar", {
        params: {
          userId: store.getUserId,
          blogId: this.blogId
        }
      })
      this.isStar = result
    },
    async addStar() {
      if (!store.hasUserInfo) {
        ElMessage.error({showClose: true, message: "请先登录后在使用收藏功能！", duration: 1000})
        return false
      }
      let {data: result} = await this.$http.post("/api/star/addStar", {
            userId: store.getUserId,
            blogId: this.blogId
          }
      )
      if (result.code === 200) {
        this.isStar = true
      }
      ElMessage.success(result.msg)
    },
    async delStar() {
      let {data: result} = await this.$http.post("/api/star/delStar", {
            userId: store.getUserId,
            blogId: this.blogId
          }
      )
      if (result.code === 200) {
        this.isStar = false
      }
      ElMessage.success(result.msg)
    },
    changeStar() {
      if (!store.hasUserInfo) {
        ElMessage.error({showClose: true, message: "请先登录后在使用收藏功能！", duration: 1000})
        return false
      }
      if (this.isStar) {
        this.delStar()
      } else {
        this.addStar()
      }
    }


  }
}
</script>

<style scoped>
.el-icon {
  vertical-align: text-bottom;
  margin-right: 5px;
}

.banner {
  background-image: url('/headImg/article.jpg');
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
  height: 400px;
  width: 100%;

  color: white;
  font-weight: bolder;
  text-align: center;
  padding-top: 150px;
}

.release_time {
  position: absolute;
  bottom: 0;
  margin: 0 5px;
  color: #8c939d;
  font-size: 0.6em;
}


a {
  color: #036b67;
  text-decoration-line: none;
}

.buttons {
  text-align: center;
  margin: 30px;
}

.around {
  display: flex;

  .left {
    width: 50%;
    justify-content: flex-start;
  }

  .right {
    width: 50%;
    justify-content: flex-end;
    text-align: right;
  }
}
</style>